<template>
  <div class="search">
      <div class="top">
          <span @click="cityObj">返回</span>
          <span v-text="cityO"></span>
          <span>切换城市</span>
      </div>
      <div class="serchPosition">
          <input type="text"  placeholder="输入学校、商务楼、地址" v-model="searchObj" >
          <button @click="btn">提交</button>
          <ul v-if="showA" class="resUl">
              <p class="searchHis">搜索历史</p>
              <li v-for="(v,i) in historyObj" :key="i" @click="searchContent(v)">
                  <p v-text="v.name" class="addressName"></p>
                  <p v-text="v.address" class="address"></p>
              </li>
             <div class="clearAll" v-if="showClear" @click="clearAll">清空所有</div>
          </ul>
          <!-- 搜索结果 -->
          <ul v-if="showR&&!showA" class="resUl">
              <li v-for="(v,i) in resultArr" :key="i" @click="searchContent(v)">
                  <p v-text="v.name" class="addressName"></p>
                  <p v-text="v.address" class="address"></p>
              </li>
          </ul>
          <!-- 未搜到结果 -->
          <p v-if="resultArr.length==0" class="noResult">很抱歉，未搜索到该地址</p>
      </div>
  </div>
</template>

<script>
import { mapState} from "vuex";
let hisArr=[];//定义一个数组存储历史搜索记录
let uniqueArr=[];//去重后的数组
export default {
    name:'search',
    data(){
       return{
           searchObj:"",
           idO:{},//接受传递过来的城市ID
           nameO:{},
           cityO: {}, //接受传递过来的城市名称
           resultArr:{},
           showA:true,
           showR:false,
           showClear:false,
           historyObj:[],//历史记录
       }
    },
    created(){
        this.$store.commit('getBottomActive',0)
        // this.idO=this.$route.query.id
        // this.nameO=this.$route.query.name
        // 方式二：使用vuex中的共享数据state 取值
        this.cityO = this.$store.state.citys.name;
        this.idO=this.$store.state.citys.id;
        //获取所有cookies
        this.historyObj=JSON.parse(this.$cookies.get("searchHistory"));
        // 如果有历史记录 显示清空所有按钮
        if(this.historyObj){
            this.showClear=true
        }
        
    },
    methods:{
        btn(){
            const api=this.eleUrl.search + "?city_id="+this.idO + "&keyword="+this.searchObj;
            this.$http({
                url:api,
                method:"get",
                data:{}
            }).then((res)=>{
               // console.log(res.data)
                this.resultArr=res.data;
                this.showR=true;
                this.showA=false;
            })
            //清空输入框
            this.searchObj="";
        },
        // 数组去重
        unique(arr){
            uniqueArr=Array.from(new Set(arr))
            return uniqueArr;
        },
        // 搜索记录
        searchContent(content){
            //把数据存入数组中去
            hisArr.push(content);
            //数组去重
            this.unique(hisArr);
            //json格式存储到cookie
             this.$cookies.set("searchHistory",JSON.stringify(uniqueArr),60 * 60 * 24 * 30);
            //将点击的信息存到state中
            this.$store.commit("getNowPosition",content);
            //点击跳转到订餐首页
            this.$router.push({
                name:'home'
            });
        },
        // 清空历史记录
        clearAll(){
            this.$cookies.remove("searchHistory");
            hisArr=[];
            this.showClear=false;
            this.historyObj=JSON.parse(this.$cookies.get("searchHistory"));
        },
        cityObj(){
            this.$router.back();
            //this.$router.go(-1) -n代表返回几级
        }
    },
    computed:{
        ...mapState(["eleUrl","bottomActive"])
    }
}
</script>

<style scoped>
    .search{
        font-size: .15rem;
        background-color: #EDEDED;
    }
    .search{
        width: 100%;
        height: 100%;
    }
    .top{
        height:.4rem;
        width: 100%;
        background-color:rgb(80, 143, 238);
    }
    .top>span{
        color:white;
        line-height: .4rem;
        margin-left:.2rem;
    }
    .top>span:nth-child(2){
        margin-left:1.2rem;
        font-weight: bold;
    }
    .top>span:nth-child(3){
        margin-left:.8rem;
    }
    .serchPosition{
        border-bottom: 2px solid #ddd;
        border-top: 2px solid #ddd;
        background-color: #fff;
        width: 3.75rem;
        margin: 0 auto;
        margin-top: .1rem;
    }
    .serchPosition>input{
        height: .28rem;
        width: 80%;
        border-radius:5px;
        outline:none;
        border: 1px solid gray;
        display: block;
        margin: .1rem auto;
        padding-left: .1rem;
    }
    .serchPosition>button{
        display: block;
        margin: .1rem auto;
        height: .3rem;
        width: 85%;
        color: white;
        border: none;
        border-radius: 5px;
        background-color: rgb(80, 143, 238);;
    }
    /* 搜索结果 */
    .resUl > li{
        padding:.1rem;
        border-top: 1px solid rgb(190, 187, 187);
    }
    .addressName{
        font-size: .18rem;
    }
    .address{
        font-size: .14rem;
        color: gray;
        margin-top: .1rem;
    }
    /* 搜索历史 */
    .searchHis{
        padding: .1rem;
        font-size: .14rem;
    }
    /* 清空所有 */
    .clearAll{
        text-align: center;
        font-size: .2rem;
        height: .5rem;
        line-height: .5rem;
        color: gray;
        border-top: .01rem solid #ddd;
    }
    /* 未搜索到结果 */
    .noResult{
        text-align: center;
        margin: .3rem;
    }
</style>